<template>
  <div>
    <div>
      <myNews
        v-for="item in newsList"
        :key="item.id"
        :item="item"
        @click="gotoNewsDetail(item.id)"
      />
      <!-- 封装单个 那么父传子传item 以后是列表都封装单个 -->
    </div>
  </div>
</template>
<script>
import { getNewsList } from "../../utils/home.js";
import { reactive, toRefs, ref } from "vue";
import myNews from "../../components/myNews.vue";
import { useRouter } from "vue-router";
//引入路由一定记得从vue-router下引入
export default {
  setup() {
    const router = useRouter();
    //定义路由对象
    const data = reactive({
      newsList: [],
    });

    getNewsList().then((res) => {
      data.newsList = res.data;
    });
    //获取 文章列表 渲染数据

    const gotoNewsDetail = (id) => {
      router.push(`/articleDetail/${id}`);
      //动态路由只能字符串拼接传参
      // 注意动态路由 一定在路由规则上也加上:id
    };
    return { ...toRefs(data), gotoNewsDetail };
  },
  components: {
    myNews,
  },
};
</script>
